<template>
    <div class="course">
        <cjc-nav title="课程分类" @customRouter="customRouter"></cjc-nav>
        <!-- <div class="course-content" v-show="isMenuList"> -->
        <div class="course-content">
            <div class="course-list">
               <Row>
                    <Col span="22">
                        <div class="swiper-container">
                            <swiper :options="swiperOption">
                                <!-- <swiper-slide  class="swiper-wrapper "> -->
                                <swiper-slide  class="swiper-wrapper" v-for="(item,index) in menuData" :key="index">
                                        <!-- <div class="swiper-slide course-swiper-item" v-for="(item,index) in menuData" :key="index" :class="{'Citem':item.local}" @click="handleMenu(menuData, index)"> -->
                                        <div class="swiper-slide course-swiper-item"  :class="{'Citem':item.local}" @click="handleMenu(menuData, index)">
                                            <p>{{item.name}}</p>
                                        </div>
                                </swiper-slide >
                            </swiper>
                        </div>
                    </Col>
                    <Col span="2" style="text-align:center; line-height: 35px;"><span @click="isMenuList=false,isPackup=true"><Icon type="xiangxia" style="color: #fff;"/></span></Col>
                </Row>
            </div>
            <!-- 课程列表 -->
            <div class="course-content-list" v-if="courseDetailList.length > 0">
                <pullRefresh :dataLoaded="dataLoaded"  :dataLoding="dataLoding"
                    @fetchData="getCourseListByCondition" 
                    @refresh="refresh" 
                    @getScrollTop="getScrollTop">
                        <div class="course-item" v-for="item in courseDetailList" :key="item.index" style="display: inline-block" @click="goCourseDetail(item)">
                        <div class="course-left">
                            <div class="couser-image" v-show="item.courseImageUrl.length > 45">
                                <!-- 课程图片 -->
                                <img :src=item.courseImageUrl alt="">
                                <div class="tag" v-show="item.courseTag !== '无' && item.courseImageUrl.length > 45 && item.courseTagColor.length > 0" :style="item.courseTagColor">
                                    <span>{{item.courseTag}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="course-right">
                            <!-- 课程内容 -->
                            <div class="course-container">
                                <p class="course-title">{{ item.courseContentTitle }}</p>
                                <p class="course-descible">{{ item.courseContentDesc }}</p>
                                <p class="course-price">
                                    <!-- <span class=""><Icon type="jinqian" style="color: #999;"/></i>{{ item.coursePrice }}</span>
                                    <span class=""><Icon type="shijian1" style="color: #999; margin-left:4px;"/></i> {{ item.courseTime}}</span> -->
                                    <table style="width: 100%;">
                                        <tr style="width: 100%;overflow: hidden;">
                                            <td style="width: 50%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><Icon type="jinqian" style="color: #999;"/></i> {{ item.coursePrice }}</td>
                                            <td style="width: 50%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><Icon type="shijian1" style="color: #999;"/></i> {{ item.courseTime}}</td>
                                        </tr>
                                    </table>
                                </p>
                            </div>
                        </div>
                    </div>
                </pullRefresh>
            </div>
            <div class="course-content-list" v-if="!this.$store.state.courseDataFull">
                <div class="no-data">
                    <div class="nodata-container">
                        <img width="120px" src="static/images/noData.png">
                        <div>暂无数据</div>
                    </div>
                </div>
            </div>
            <!-- 课程列表 end -->
        </div>
        <div class="course-list-detail" v-show="isPackup">
            <div class="course-list-detail-box">
                <div class="course-select-top">
                    <div class="course-list-detail-left">选择类目</div>
                    <div class="course-list-detail-right">
                        <span @click="isMenuList=true,isPackup=false"><Icon type="arrowup" style="color: #22d8d6;"/></span>
                    </div>
                </div>
                <div class="course-select-box">
                    <div class="course-select-box-item" v-for="(item,index) in menuList" :key="index"  @click="handleMenu(menuList, index)">
                        <div class="course-item-botton" :class="{'CitemSelected':item.local}">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <!-- <div class="triangle-yellow"></div>
            <div class="triangle-blue"></div> -->
        </div>
    </div>
</template>

<script>
// import Swiper from 'swiper'
import { Swiper } from 'vue-awesome-swiper/src/index'
import 'swiper/dist/css/swiper.min.css'
window.tempCourseDetailList = []
export default {
    created() {
        const Vm = this
        Vm.getCourseCategory()
        window.tempCourseDetailList = []
        console.log(this)
        Vm.swiperList()
        // this.getCourseList()
        // Vm.$store.commit('SET_currentCategoryName', '')
        Vm.$store.commit('SET_currentPageNum', 1)
        Vm.getCourseListByCondition()
    },
    data() {
        return {
            isMenuList: false,
            isPackup: false,
            swiperOption: {
                slidesPerView: 3.65,
                // slidesPerColumn: 1,
                spaceBetween: 10,
                freeMode: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
            },
            dataLoding: false,
            dataLoaded: false,
            doRefresh: true,
            menuData: [
                // {local: true, name: '全部'},
                // {local: false, name: '放松训练'},
                // {local: false, name: '耐力训练'},
                // {local: false, name: '矫正训练'},
                // {local: false, name: '其他训练'}
            ]
        }
    },
    computed: {
        courseDetailList() {
            const Vm = this
            try {
                // let tempObj = []
                Vm.$store.state.courseList.map((item) => {
                    let color = ''
                    // console.log(item)
                    Vm.$store.state.courseTag.map((tags) => {
                        if (tags.tag === item.courseTag) {
                            color = 'border-top-color:' + tags.color
                        }
                    })
                    // console.log(item)
                    let a = {
                        courseImageUrl: item.picUrl,
                        courseContentTitle: item.courseName,
                        courseContentDesc: item.courseDesc,
                        courseTime: item.courseTime,
                        coursePrice: item.coursePrice,
                        courseTag: item.courseTag,
                        detailUrl: item.detailUrl,
                        courseTagColor: color
                    }
                    window.tempCourseDetailList.push(a)
                })
                console.log('aa', window.tempCourseDetailList)
                // Vm.$store.commit('SET_courseRenderList', tempCourseDetailList)
                // tempCourseDetailList = []
                console.log('当前列表总数: ', Vm.$store.state.total)
                return window.tempCourseDetailList
            } catch (err) {
                return []
            }
        },
        menuList() {
            const Vm = this
            // console.log('ccccpu-----', this.menuData)
            // if (Vm.$store.state.currentCategoryName === '全部' || Vm.$store.state.currentCategoryName === '') {
            //     this.menuData[0].local = true
            // } else {
            //     Vm.menuData.map((item) => {
            //         item.local = false
            //         if (item.name === Vm.$store.state.currentCategoryName) {
            //             item.local = true
            //         }
            //     })
            // }
            Vm.menuData.map((item) => {
                item.local = false
                if (Vm.$store.state.currentCategoryName === '全部' || Vm.$store.state.currentCategoryName === '') {
                    this.menuData[0].local = true
                } else if (item.name === Vm.$store.state.currentCategoryName) {
                    item.local = true
                }
            })
            return Vm.menuData
        }
    },
    methods: {
        customRouter() {
            this.$router.push({
                path: '/home'
            })
            window.tempCourseDetailList = []
            // this.$store.state.courseList = []
            this.$store.commit('SET_courseList', '')
            window.contentRenderList = []
            console.log('window.contentRenderList', window.contentRenderList)
            // this.$store.state.subscribeContentList = []
            this.doRefresh = true
            this.$store.commit('SET_currentPageNum', 1)
        },
        swiperList() { // 实例化swiper函数
            console.log('pagination')
            var swiper = new Swiper('.swiper-container', {
                // pagination: '.swiper-pagination',
                // paginationClickable: true,
                // loop: true,
                speed: 600,
                pagination: {
                    el: '.swiper-pagination',
                },
                // centeredSlides: true,
                slidesPerView: 'auto',
                onTouchEnd: function() {
                    swiper.startAutoplay()
                }
            })
        },
        handleMenu(item, index) {
            // 清空临时列表数据
            const Vm = this
            Vm.$store.commit('SET_courseList', '')
            Vm.$store.commit('SET_currentPageNum', 1)
            Vm.doRefresh = true
            window.tempCourseDetailList = []
            for (let i = 0; i < item.length; i++) {
                if (i !== index) {
                    item[i].local = false
                } else {
                    item[i].local = true
                }
            }
            item.local = true
            console.log(item[index].name)
            window.tempCourseDetailList = []
            if (item[index].name === '全部') {
                Vm.$store.commit('SET_currentCategoryName', '')
                Vm.getCourseListByCondition()
            } else {
                Vm.$store.commit('SET_currentCategoryName', item[index].name)
                Vm.getCourseListByCondition()
            }
            // Vm.$store.commit('SET_currentCategoryName', item[index].name)
        },
        getCourseList() {
            const Vm = this
            Vm.$store.dispatch('getAllCourse', {
                pageNum: Vm.$store.state.currentPageNum,
                pageSize: Vm.$store.state.pageSize
            })
                .then(res => {
                    console.log(res)
                    if (res.data.status === 1000) {
                        Vm.$store.commit('SET_courseList', res.data.result)
                    } else {
                        console.log(res.data.msg)
                    }
                })
        },
        // 获取课程列表
        getCourseListByCondition() {
            console.log('we call this---------')
            if (this.doRefresh) {
                const Vm = this
                this.dataLoding = true
                Vm.$store.dispatch('getCourseByCategory', {
                    courseName: '',
                    courseTag: '',
                    categoryName: Vm.$store.state.currentCategoryName,
                    pageNum: Vm.$store.state.currentPageNum,
                    pageSize: Vm.$store.state.pageSize
                })
                    .then(res => {
                        console.log('course', res.data)
                        if (res.data.status === 1000) {
                            Vm.$store.commit('SET_courseList', res.data.result)
                            Vm.$store.commit('SET_courseDataFull', true)
                            Vm.$store.commit('SET_total', res.data.total)
                        } else {
                            Vm.$store.commit('SET_courseDataFull', false)
                            console.log(res.data.msg)
                        }
                        Vm.dataLoding = false
                        Vm.$store.commit('SET_currentPageNum', Vm.$store.state.currentPageNum + 1)
                        console.log('current page', Vm.$store.state.currentPageNum)
                    })
            }
        },
        // 获取课程分类
        getCourseCategory() {
            const Vm = this
            Vm.$store.dispatch('getAllCategories')
                .then(res => {
                    console.log(res.data)
                    if (res.data.status === 1000) {
                        console.log('---enter----')
                        try {
                            let tempObj = [
                                {local: true, name: '全部'}
                            ]
                            res.data.result.map((item) => {
                                let a = {
                                    local: false,
                                    name: item.categoryName
                                }
                                tempObj.push(a)
                            })
                            // return tempObj
                            this.menuData = tempObj
                            console.log(this.menuData)
                        } catch (err) {
                            return []
                        }
                    }
                })
        },
        getScrollTop(ScrollTop) {
            const Vm = this
            if (window.tempCourseDetailList.length >= Vm.$store.state.total) {
                Vm.doRefresh = false
                Vm.dataLoaded = true
            }
            // console.log(ScrollTop)
            // Vm.$store.commit('SET_currentPageNum', Vm.$store.state.currentPageNum + 1)
            // console.log('current page', Vm.$store.state.currentPageNum)
        },
        refresh() {
            // const Vm = this
            // console.log('current page', Vm.$store.state.currentPageNum)
            // Vm.$store.commit('SET_currentPageNum', Vm.$store.state + 1)
            // console.log('refresh')
        },
        goCourseDetail(item) {
            console.log('item', item.detailUrl)
            this.$store.commit('SET_courseDetailUrl', item.detailUrl)
            console.log(this.$store.state.courseDetailUrl)
            this.$router.push({
                path: '/courseDetail'
            })
        }
    },
    // components: {
    //     cjcnav: () => import('@/components/common/Nav.vue'),
    // }
}
</script>

<style lang="less" scoped>
@import '../style/sport-variable';
@triangle-size: 35px;
@selectTitle: calc(~'100% / 24');
.course-content {
    height: calc(~'100vh - 50px');
    width: 100%;
    background: #fff;
    .course-list {
        height: 40px;
        width: 100%;
        background: @color-complementary;
    }
    .course-content-list {
        height: calc(~'100vh - 95px');
        width: 100%;
        float: right;
        overflow-y: auto;
        background: #ffffff;
        -webkit-overflow-scrolling: touch;
        .course-item {
            margin-bottom: 5px;
            margin-top: 10px;
            height: 100px;
            width: 100%;
            display: flex;
            flex-direction: row;
            .course-left {
                width: calc(~'100% / 2');
                // width: 40%;
                height: 100px;
                padding-left: 3%;
                position: absolute;
                .couser-image {
                    // position: relative;
                    height: 100%;
                    width: 100%;
                    img {
                        height: 100%;
                        width: 100%;
                    }
                    .tag {
                        float: left;
                        color: white;
                        position: absolute;
                        margin-top: -108px;
                        margin-left: -3px;
                        transform: scale(0.83);
                        width: 0;
                        height: 0;
                        border-top: @triangle-size solid;
                        border-right: @triangle-size solid transparent;
                        // position: relative;
                        &::after {
                            // content: "优惠";
                            font-size: 12px;
                            position: absolute;
                            display: inline-block;
                            color: white;
                            font-size: 12px;
                            text-align: center;
                            width: @triangle-size;
                            height: @triangle-size;
                            margin-top: -33px;
                            transform:rotate(-45deg);
                            -ms-transform:rotate(-45deg);
                            -moz-transform:rotate(-45deg); 	
                            -webkit-transform:rotate(-45deg); 
                            -o-transform:rotate(-45deg); 
                        }
                        span {
                            position: absolute;
                            display: inline-block;
                            color: white;
                            font-size: 12px;
                            text-align: center;
                            width: @triangle-size;
                            height: @triangle-size;
                            margin-top: -33px;
                            transform: scale(0.8);
                            transform:rotate(-45deg);
                            -ms-transform:rotate(-45deg);
                            -moz-transform:rotate(-45deg); 	
                            -webkit-transform:rotate(-45deg); 
                            -o-transform:rotate(-45deg); 	
                        }
                    }
                }
            }
            .course-right {
                width: calc(~'100% / 2');
                // width: 57%;
                height: 100px;
                position: absolute;
                right: 0px;
                .course-container {
                    height: 100%;
                    // width: calc(~'100% - 25px');
                    width: calc(~'100% - 20px');
                    // margin-top: 8px;
                    margin-top: 10px;
                    border-bottom: 1px solid @color-spread-line2;
                    position: absolute;
                    right: 0px;
                    .course-title {
                        font-size: 15px;
                        line-height: 20px;
                        color: @color-list-title;
                    }
                    .course-descible {
                        font-size: 12px;
                        color: @color-list-text;
                        padding-right: 5px;
                        // overflow: hidden;
                        // white-space: nowrap;
                        // text-overflow: ellipsis;
                    }
                    .course-price {
                        overflow: hidden;
                        // background: #ffcd65;
                        width: 98%;
                        margin-right: 2%;
                        margin-top: 5px;
                        font-size: 12px;
                        color: @color-theme;
                    }
                }
            }
        }
    }
}
.course-list-detail {
    z-index: 200;
    height: calc(~'100vh - 50px');
    width: 100%;
    position: absolute;
    top: 50px;
    background-color: rgba(0, 0, 0, .1);
    transition: 0.3s ease;
    .course-list-detail-box {
        background-color: #fff;
        // height: 150px;
        width: 100%;
        padding-bottom: 5px;
        .course-select-top {
            height: 40px;
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            border-bottom: 1px solid @color-spread-line2;
            .course-list-detail-left {
                height: 40px;
                width: calc(~'@{selectTitle} * 22');
                padding-left: 15px;
                font-size: 15px;
                line-height: 40px;
            }
            .course-list-detail-right {
                height: 40px;
                width: calc(~'@{selectTitle} * 2');
                line-height: 40px;
                text-align: center;
                border-bottom: 1px solid @color-spread-line2;
            }
        }
        .course-select-box {
            // height: 35px;
            width: 94%;
            line-height: 35px;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            text-align: center;
            margin-top: 2px;
            margin-bottom: 20px;
            .course-select-box-item {
                margin-top: 8px;
                width: calc(~'100% / 4');
                .course-item-botton {
                    line-height: 35px;
                    width: 95%;
                    height: 100%;
                    border: 1px solid @color-spread-line2;
                }
            }
        }
    }
}
.course-swiper-item {
    height: 40px;
    // width: 100px;
    line-height: 40px;
    color: #ffffff;
    text-align: center;
    p {
        line-height: 40px;
        font-size: 14px;
        text-align: center;
    }
}
// 绘制三角形
.triangle {
    width: 0;
    height: 0;
    border-top: @triangle-size solid;
    border-right: @triangle-size solid transparent;
    position: relative;
    &::after {
        // content: "优惠";
        font-size: 12px;
        position: absolute;
        display: inline-block;
        color: white;
        font-size: 12px;
        text-align: center;
        width: @triangle-size;
        height: @triangle-size;
        margin-top: -33px;
        transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg); 	
        -webkit-transform:rotate(-45deg); 
        -o-transform:rotate(-45deg); 
    }
}
.triangle-green {
    width: 0;
    height: 0;
    border-top: @triangle-size solid #34cd99;
    border-right: @triangle-size solid transparent;
    position: relative;
    &::after {
        content: "优惠";
        font-size: 12px;
        position: absolute;
        display: inline-block;
        color: white;
        font-size: 12px;
        text-align: center;
        width: @triangle-size;
        height: @triangle-size;
        margin-top: -33px;
        transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg); 	
        -webkit-transform:rotate(-45deg); 
        -o-transform:rotate(-45deg); 
    }
}
.triangle-blue {
    width: 0;
    height: 0;
    border-top: @triangle-size solid #339afe;
    border-right: @triangle-size solid transparent;
    position: relative;
    &::after {
        content: "推荐";
        font-size: 12px;
        position: absolute;
        display: inline-block;
        color: white;
        font-size: 12px;
        text-align: center;
        width: @triangle-size;
        height: @triangle-size;
        margin-top: -33px;
        transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg); 	
        -webkit-transform:rotate(-45deg); 
        -o-transform:rotate(-45deg); 
    }
}
.triangle-yellow {
    width: 0;
    height: 0;
    border-top: @triangle-size solid #ffcd65;
    border-right: @triangle-size solid transparent;
    position: relative;
    &::after {
        content: "新品";
        font-size: 12px;
        position: absolute;
        display: inline-block;
        color: white;
        font-size: 12px;
        text-align: center;
        width: @triangle-size;
        height: @triangle-size;
        margin-top: -33px;
        transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg); 	
        -webkit-transform:rotate(-45deg); 
        -o-transform:rotate(-45deg); 
    }
}
.ivu-icon-fanhui {
    color: @color-theme !important;
}
.Citem {
    background: @color-theme;
}
.CitemSelected {
    background: @color-theme;
    color: #fff;
}
.no-data {
    width: 100%;
    // height: calc(~'100vh - 95px');
    background: #fff;
    color: @color-list-text;
    text-align: center;
    margin-top: 10px;
    .nodata-container {
        height: 150px;
        width: 120px;
        margin: auto auto;
        margin-top: 50%;
        // background: red;
    }
}
</style>

